<template>
  <div
    v-if="token"
    class="heard-textarea"
    :class="{
      't-textarea0': store.styleInfo.themeColor == '#CFBDA8',
      't-textarea1': store.styleInfo.themeColor == '#8F9EBF',
      't-textarea2': store.styleInfo.themeColor == '#B9463F',
      't-textarea3': store.styleInfo.themeColor == '#343029',
      't-textarea4': store.styleInfo.themeColor == '#171719',
    }"
  >
    <t-textarea placeholder="说两句吧" v-model="parmas.content" :autosize="{ minRows: 5 }" maxlength="500" />
    <div class="textarea-bottom">
      <span class="bottom-text">还可输入{{ 500 - parmas.content.length }}字</span>
      <!-- <div
          class="textarea-buttom"
          :style="{ background: store.styleInfo.themeColor, color: '#fff', fontSize: store.styleInfo.fontSize }"
        >
          发表评论
        </div> -->
      <div
        @click="setComment"
        :style="{
          fontSize: store.styleInfo.mintitleSize,
          color: '#fff',
        }"
        class="left-btn flex-c-c-c"
      >
        <div class="btn-img">
          <buttonIcon />
        </div>

        <span>发表评论</span>
      </div>
    </div>
  </div>
  <div v-else>
    <div class="login-null">
      <div>
        <a
          :style="{
            color: store.styleInfo.themeColor,
          }"
          @click="goLogin"
          >登录注册</a
        >
        后发表你的想法～
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import buttonIcon from '@/components/title/buttonIcon.vue';
import { addComment } from '@/api/comment/comment';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref, computed, reactive } from 'vue';
import { useProjectStore } from '@/store';

import { doorUrl, outLogin } from '@/utils/minxin';
import { getHeardToken } from '@/api/utils';
let token = getHeardToken();
let url = window.location.href;
let redirectUrl = doorUrl + 'login?redirect=' + url;
const goLogin = () => {
  outLogin(redirectUrl);
};
const store = useProjectStore();
const parmas = reactive({
  id: 0,
  content: '',
  showpieceId: 0,
  projectId: String(localStorage.getItem('projectId')),
});
const loading = ref(false);
const props = defineProps({
  showpieceId: {
    type: Number,
  },
});
const emit = defineEmits(['commentSuccess']);

const setComment = async () => {
  try {
    if (loading.value) {
      return;
    }

    if (!parmas.content) {
      MessagePlugin.error('请填写留言内容');
      return;
    }
    var valuestr = parmas.content.trim();
    console.log(valuestr.length);

    if (valuestr.length == 0) {
      MessagePlugin.error('留言内容不能为空');
      return;
    }
    loading.value = true;
    parmas.showpieceId = props.showpieceId;
    let { statusCode } = await addComment(parmas);
    if (statusCode == 200) {
      MessagePlugin.success('留言成功 等待审核');
      parmas.content = '';
      emit('commentSuccess');
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.heard-textarea {
  margin-top: 50px;
}
.textarea-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-top: 28px;
}
.bottom-text {
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.left-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 180px;
  height: 56px;
  margin-top: 32px;
  user-select: none;
  span {
    position: relative;
    z-index: 99;
  }
}
.btn-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textarea-buttom {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 48px;
  font-size: 16px;
  // font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
}
/deep/.t-textarea__inner:focus {
  box-shadow: 0 0 0 0;
  border-color: var(--td-border-level-2-color);
}
.t-textarea0 {
  :deep(.t-textarea__inner:focus) {
    border-color: #d2ad77;
  }
}
.t-textarea1 {
  :deep(.t-textarea__inner:focus) {
    border-color: #133889;
  }
}
.t-textarea2 {
  :deep(.t-textarea__inner:focus) {
    border-color: #ab1d22;
  }
}
.t-textarea3 {
  :deep(.t-textarea__inner:focus) {
    border-color: #3f4d4f;
  }
}
.t-textarea4 {
  :deep(.t-textarea__inner:focus) {
    border-color: #949494;
  }
}
.login-null {
  width: 1180px;
  height: 64px;
  background: rgba(255, 255, 255, 0.8);
  // border: 1px solid #d9d9d9;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}
a {
  text-decoration: underline;
}
/deep/.t-textarea__inner:hover {
  border-color: var(--td-border-level-2-color);
}
/deep/.t-textarea__limit {
  display: none;
}
</style>
